<template>
  <div id="wrapper">
    <el-menu
    :collapse="isCollapse"
    style="border-right: none;"
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
    :style="{width: isCollapse ? '' : '200px'}"
    :collapse-transition="false"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
        <el-menu-item @click="collapse" style="text-align: center;height: 30px;line-height: 30px">
            <i class="el-icon-plus" v-if="isCollapse"></i>
            <i class="el-icon-d-arrow-left" v-if="!isCollapse"></i>
        </el-menu-item>
        <el-menu-item index="/licenseList">
          <i class="el-icon-s-claim"></i>
          <span slot="title">许可证</span>
        </el-menu-item>
<!--        <el-menu-item index="/tool">-->
<!--          <i class="el-icon-attract"></i>-->
<!--          <span slot="title">常用工具</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/zentao">-->
<!--          <i class="el-icon-question"></i>-->
<!--          <span slot="title">禅道</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/config">-->
<!--          <i class="el-icon-setting"></i>-->
<!--          <span slot="title">配置</span>-->
<!--        </el-menu-item>-->
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'nav-menu',
    data: function() {
      return {
          isCollapse: true
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      collapse() {
        this.isCollapse = !this.isCollapse
      }
    }
  }
</script>


